<template>

  <div class="menu"> 
      <div class="left">
          <div class="left-top"> 
            <slot-scope :items="items">
            
              <div  slot="item" slot-scope="props" class="my-fancy-item1">
                <p>
                   展示不同的插槽{{ props.text[1] }}
                </p>
              </div>
            </slot-scope>

           <slot-scope :items="items">
              <p
                slot="item"
                slot-scope="props"
                class="my-fancy-item2">
                 第二种展示数据{{props.text[2]}}
              </p>
            </slot-scope> 
           <Tree :index = "index"></Tree>
           
          </div> 
          <div class="left-bottom"> 
            <pull-down-menu :title = "title" @change = "parentChange"></pull-down-menu>


            <!-- <el-row class="tac">
              <el-col :span="24">
                
                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose">
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                      <template slot="title">分组一</template>
                      <el-menu-item index="1-1">选项1</el-menu-item>
                      <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                      <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group> 
                    <el-submenu index="1-4">
                      <template slot="title">选项4</template>
                      <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                  </el-submenu>
                  <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                  </el-menu-item>
                  <el-menu-item index="3">
                    <i class="el-icon-setting"></i>
                    <span slot="title">导航三</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row> -->

           



          </div> 
          <router-view ></router-view>
      </div>
      <div class="right">
          右边
      </div>
  </div>
</template>
<script>
import pullDownMenu from '../com/pull-down-menu';
import downMenu from '../com/down-menu';
import Tree from '../com/tree';
import slotScope from '../com/slot-scope';
export default {
  data() {
    return {
      title:["list1","list2","list3","list4","list5","list6","list7"],
      index:"0",
      items:["a1","b1","c1","d1","f1"],
      menuList:{ "title": 4,
                 "级别": { "d": 4 }, 
                 "timestamp": 142364758067,
                 "author": "叶秀兰",
                 "title": "四己张业日属深形上八来问里需列特三最十", 
                 "forecast": 63.64,
                 "type": "JP", 
                 "display_time": "2002-07-12 19:43:06", 
                 "pageviews": 3132
                     } 
    };
  },
  created(){
    
  },
  methods:{
        parentChange(index){
        this.index = index;
        console.log("点击的索引:",index)
        console.log("父组件索引:",this.index)
        console.log("事件对象：",event.target)
      }
  },

  components:{pullDownMenu,Tree,slotScope,downMenu}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

.menu{
  height: 100%;
  width:100%;
  &>*{
   float: left;
  }
  .left{
    height: 100%;
    width:20%;
    border-right:1px solid #000;
    &>*{
      wifth:100%;
      height: 50%;
      border-bottom:1px solid #ccc;
    }
    .left-top{
      .my-fancy-item1{
        color:aqua;
      }
     .my-fancy-item2{
        color:lightcoral;
      }
    }
    .left-bottom{
      .tac{
        margin-top:20px;
       .el-menu-vertical-demo{
         background:thistle;
       }
      }
      
    }

  }
 .right{
    height: 100%;
    width:80%;
    background:#fff;
    
  }
}

</style>